<template>
	<view>
		<view>
			<!-- tab栏切换动态改变激活样式 -->
			<view class="nav">
				<view class="nav-list" v-for="(item,index) in list" :key="index+0" @tap="changeAct(item)">

					<!-- 激活样式名字是红色 判断act==index 和act==item.id-->
					<view :class="act === index ? `text-${themeColor.name} current` : ''">
						{{item.name}}
					</view>
					<!-- <view :class="[act==index?'':'']" class="Bottom"> </view> -->
				</view>

			</view>
			
			<!-- 底部tab -->
			<view class="rf-screen-bottom">
				<block v-for="(item,index) in attrArr" :key="index">
					<view class="rf-bottom-item rf-icon-ml" :class="[item.isActive ? `bg-${themeColor.name} rf-btmItem-active` : 'rf-btmItem-normal',attrIndex==index?'rf-btmItem-tap':'']"
					 :data-index="index" @tap="btnDropChange">
						<view class="rf-bottom-text" :class="[attrIndex==index?'rf-active':'']">{{item.isActive?item.selectedName:item.name}}</view>
						<text class="iconfont" :class="attrIndex==index?'iconshang':'iconxia'" :size="14" :color="attrIndex==index || item.isActive?'$base-color':'#444'"
						 rf-icon-class="rf-ml" v-if="item.list.length>0"></text>
					</view>
				</block>
			</view>
			<!-- /底部tab切换
			
			<!-- 活动的内容1 -->
			<block v-if="act===0 ">
				<view class="content" v-for="(item,index) in announceList" :key='index' @tap="navTo(`/pages/qdome/qdBox/qdbox?id=`+id)">
					<view class="title" >
						{{content.content}}
					</view>
					<image class="image" src="../../static/user-bg.jpg" mode=""></image>
					<view class="center">
						<!-- 这里照片可以更换 -->
						<text :class="'text-' + themeColor.name">{{content.weizhi}} </text><text>养老院</text>
					</view>
					<view class="text">
						<!-- 位置 -->
						<text>查看详情</text>
						<!-- 时间 -->
						<text>{{content.time | time}}</text>
						<view class="bot b-t">
							<i class="more-icon iconfont iconyou"></i>
						</view>
					</view>
				</view>
			</block>

			<!-- 活动的内容2 -->
			<block v-if="act===1 || act===0">
				<view class="content" v-for="(item,index) in announceList" :key='index+1' @tap="navTo(`/pages/qdome/qdBox/qdbox?id=${item.id}&type=2`)">
					<view class="title" >
						<!-- :class="'text-' + themeColor.name" 变色字体 -->
						{{content.content1 || content.content}}
					</view>
					<!-- 这里照片可以更换 -->
					<image class="image" src="../../static/user-bg.jpg" mode=""></image>
					<view class="center">
						<text :class="'text-' + themeColor.name">{{content.weizhi}} </text><text>养老院</text>
					</view>
					<view class="text">
						<!-- 位置 -->
						<text>查看详情</text>
						<!-- 时间 -->
						<text>{{content.time | time}}</text>
						<view class="bot b-t">
							<i class="more-icon iconfont iconyou"></i>
						</view>
					</view>
				</view>
			</block>

			<block v-if="act===2 || act===0">
				<view class="content" v-for="(item,index) in announceList" :key='index+2' @tap="navTo(`/pages/qdome/qdBox/qdbox?id=${item.id}&type=3`)">
					<view class="title">
						{{content.content2 || content.content}}
					</view>
					<!-- 这里照片可以更换 -->
					<image class="image" src="../../static/user-bg.jpg" mode=""></image>
					<view class="center">
						<text :class="'text-' + themeColor.name">{{content.weizhi}} </text><text>养老院</text>
					</view>
					<view class="text">
						<!-- 位置 -->
						<text>查看详情</text>
						<!-- 时间 -->
						<text>{{content.time | time}}</text>
						<view class="bot b-t">
							<i class="more-icon iconfont iconyou"></i>
						</view>
					</view>
				</view>
			</block>

			<block v-if="act===3 || act===0">
				<view class="content" v-for="(item,index) in announceList" :key='index+3' @tap="navTo(`/pages/qdome/qdBox/qdbox?id=${item.id}&type=4`)">
					<view class="title">
						{{content.content3 || content.content}}
					</view>
					<!-- 这里照片可以更换 -->
					<image class="image" src="../../static/user-bg.jpg" mode=""></image>
					<view class="center">
						<text :class="'text-' + themeColor.name">{{content.weizhi}} </text><text>养老院</text>
					</view>
					<view class="text">
						<!-- 位置 -->
						<text>查看详情</text>
						<!-- 时间 -->
						<text>{{content.time | time}}</text>
						<view class="bot b-t">
							<i class="more-icon iconfont iconyou"></i>
						</view>
					</view>
				</view>
				<!-- <rf-empty info="暂无活动详情" v-if="!announceList && !loading"></rf-empty> -->
			</block>
		</view>
		
		<!--加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认激活样式是第一个
				act: 0,
				
				num: -1,
				// 一级导航栏
				list: [{
						id: 0,
						name: '全部',
						content: '全部活动',
						num: 0,
						weizhi: '包河区',
						time: '2021年1月18日',
					},
					{
						id: 1,
						name: '爱心公益',
						content1: '爱心公益',
						num: 1,
						weizhi: '斗门镇',
						time: '2021年1月19日',
					},
					{
						id: 2,
						name: '活动',
						content2: '活动',
						num: 2,
						weizhi: '瑶海区',
						time: '2021年1月20日',
					},
					{
						id: 3,
						name: '健康',
						content: '健康',
						num: 3,
						weizhi3: '蜀山区',
						time: '2021年1月21日',
					}

				],
				content: '',

				// 二级导航栏
				attrIndex: -1,
				attrArr: [{
					name: "全部",
					selectedName: "全部活动",
					isActive: true,
					params: {},
					list: []
				}, {
					name: "今日活动",
					selectedName: "今日活动",
					isActive: false,
					params: {
						is_new: 1
					},
					list: []
				}, {
					name: "已经开始",
					selectedName: "活动开始",
					isActive: false,
					params: {
						is_recommend: 1
					},
					list: []
				}, {
					name: "已经结束",
					selectedName: "活动结束",
					isActive: false,
					params: {
						is_hot: 1
					},
					list: []
				}],

				// 内容
				announceList: [{}], // 公告列表
			};
		},
		filters: {
			// 时间格式化
			time(val) {
				return val.substring(0, val.length - 2);
			}

		},
		methods: {
			changeAct(item,id) {
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = item.id;

				// 可以根据点击事件改变内容
				this.content = item
			},
			
			// 跳转页面传值
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},

			// 底部tab切换
			btnDropChange(e) {

				let index = parseInt(e.currentTarget.dataset.index, 10);
				let arr = JSON.parse(JSON.stringify(this.attrArr[index].list));
				if (arr.length === 0) {
					// tab的切换
					
					this.$set(this.attrArr[index], "isActive", !this.attrArr[index].isActive)
					if (this.attrArr[index].isActive && index === 0) {
						this.attrArr[1].isActive = false;
						this.attrArr[2].isActive = false;
						this.attrArr[3].isActive = false;
						
					}
					// 这里为选项卡切换
					if (this.attrArr[index].isActive && index === 1) {
						this.attrArr[0].isActive = false;
						this.attrArr[2].isActive = false;
						this.attrArr[3].isActive = false;
					}
					if (this.attrArr[index].isActive && index === 2) {
						this.attrArr[0].isActive = false;
						this.attrArr[1].isActive = false;
						this.attrArr[3].isActive = false;
					}
					if (this.attrArr[index].isActive && index === 3) {
						this.attrArr[1].isActive = false;
						this.attrArr[2].isActive = false;
						this.attrArr[0].isActive = false;
					}
				} else {
					// 	this.attrData = arr;
					// 	this.attrIndex = index;
					// 	this.dropScreenShow = true;
					this.$set(this.attrArr[index], "isActive", false);
					this.scrollTop = 1;
					// this.$nextTick(() => {
					// 	this.scrollTop = 0
					// });
				}
				// let params = {};
				// if (this.attrArr[0].isActive) {
				// 	params = {};
				// } else {
				// 	params.keyword = this.keyword;
				// }
				// this.attrArr.forEach(item => {
				// 	if (item.isActive) {
				// 		params = { ...params,
				// 			...item.params
				// 		}
				// 	}
				// });
				// this.page = 1;
				// this.productList = [];
				// this.loading = true;
				// this.productParams = params;
				// this.getProductList();
			},
		},
		onShow() {
			// 页面默认显示的是list列表中第一条数据
			this.content = this.list[1]
		}
	}
</script>

<style scoped>
	page {
		background-color: #fff;
		padding-bottom: 30upx;
	}

	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
		letter-spacing: 2.14rpx;
		margin: 0 30rpx;
	}

	.nav-list {
		width: 65rpx;
		height: 100%;
		margin-top: 10%;
		opacity: .9;
	}

	/* 	.nav-list .name{
		font-size: 18px;
	} */

	.nav-list .line {
		margin-top: 10upx;
		width: 60px;
		height: 4rpx;
		background-color: red;
	}

	/* 内容 */
	.content {
		margin: 10upx 20upx 30upx 20upx;
		background-color: #FAFAFA;
	}

	.content .title {
		font-size: 16px;
		font-weight: bold;
	}

	.content .image {
		width: 100%;
		height: 260upx;
	}

	.content .text {
		display: flex;
		justify-content: space-between;
	}

	.center .name {
		width: 100%;
		
		position: absolute;
		bottom: 0;
		width: 100%;
		font-weight: 400;
		line-height: 21px;
	}

	.center {
		height: 50upx;
		margin: -30px 0 0 0;
		position: relative;
		line-height: 50upx;
		/* border-bottom: 1px dashed #CCCCCC; */
		background-color: rgba(0, 0, 0, 0.2);
		/* padding: 2px 10px; */
		z-index: 10;
	}

	/*screen*/
	.rf-screen-top,
	.rf-screen-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28upx;
	}

	.rf-screen-top {
		height: 88upx;
		line-height: 88upx;
		position: relative;
		/* background: #fff; */
	}

	.rf-top-item {
		height: 28upx;
		line-height: 28upx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rf-screen-bottom {
		height: 100upx;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		align-items: center;
		overflow: hidden;
	}

	.rf-bottom-text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rf-bottom-item {
		flex: 1;
		width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 12upx;
		box-sizing: border-box;
		margin-right: 20upx;
		white-space: nowrap;
		height: 60upx;
		border: 1px solid #ccc;
		border-radius: 40upx;
	}

	.rf-bottom-item:last-child {
		margin-right: 0;
	}

	.rf-bold {
		font-weight: bold;
	}

	.rf-active {
		color: #007AFF;
	}

	.rf-icon-ml .rf-icon-class {
		margin-left: 6upx;
	}

	.rf-ml {
		margin-left: 6upx;
	}

	.rf-seizeaseat-20 {
		height: 20upx;
	}

	.rf-seizeaseat-30 {
		height: 30upx;
	}

	.rf-icon-middle .rf-icon-class {
		vertical-align: middle;
	}

	.rf-middle {
		vertical-align: middle;
	}
</style>
